

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>演示/教程 - Layui</title>
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="http://res.layui.com/layui/build/css/layui.css" media="all">
  <link rel="stylesheet" href="http://res.layui.com/css/global.css" media="all">
</head>
<body>
<div class="header" >
  <div class="layui-main">
    <a class="logo" href="http://www.layui.com">
      <img src="http://res.layui.com/images/layui/logo.png" alt="layui">
    </a>
    <span class="menu">
      <!--<a href="/hello/" >用前准备</a>-->
      <a href="/doc/" >文档</a>
      <!--<a href="/demo/" class="this">在线演示</a>-->
      <!--<a href="/alone/" >独立组件</a>-->
      <!--后台模版-->
      <a href="http://fly.layui.com">社区</a>
    </span>
  </div>
</div>
<div style="width: 1000px; margin: 30px auto;">
  <h1 style="margin-bottom: 20px; padding-bottom: 20px; font-size: 20px; font-weight: 300; color: #999; border-bottom: 1px solid #eee;">layui.form 表单模块 部分演示 - （所有文档都在陆续整理，敬请谅解）</h1>
  <form action="" class="layui-form">
    <ul>
      <li class="layui-form-li">
        <div class="layui-form-label">
          <label>用户</label>
          <input required type="text" name="username" check="username">
        </div>
      </li>
      <li class="layui-form-li">
        <div class="layui-form-label">
          <label>密码</label>
          <input required type="password" name="password">
        </div>
        <div class="layui-inline layui-form-tips">密码强度可以按照需求选择性开启</div>
      </li>
      <li class="layui-form-li">
        <div class="layui-form-label">
          <label>邮箱</label>
          <input required type="text" check="email" name="email">
        </div>
      </li>
      </li>
      <li class="layui-form-li">
        <fieldset>
          <legend>爱好</legend>
          <div class="layui-form-label layui-form-checkbox">
            <label>音乐</label>
            <input required type="checkbox" name="love[yinyue]">
          </div>
          <div class="layui-form-label layui-form-checkbox">
            <label>写作</label>
            <input required type="checkbox" checked name="love[xiezuo]">
          </div>
          <div class="layui-form-label layui-form-checkbox">
            <label>敲代码</label>
            <input required type="checkbox" name="love[daima]">
          </div>
          <div class="layui-form-label layui-form-checkbox">
            <label>旅行</label>
            <input required type="checkbox" name="love[lvxing]">
          </div>
          <div class="layui-form-label layui-form-checkbox">
            <label>做自己想做的事咯</label>
            <input required type="checkbox" name="love[daima]">
          </div>
        </fieldset>
      </li>
      <li class="layui-form-li">
        <div class="layui-form-label">
          <label>省份</label>
          <select required name="province">
            <option value="浙江省">浙江省</option>
            <option value="江西省">江西省</option>
            <option value="上海市">上海市</option>
            <option value="福建省">福建省</option>
            <option value="湖北省">湖北省</option>
            <option value="江苏省">江苏省</option>
            <option value="安徽省">安徽省</option>
            <option value="北京市">北京市</option>
            <option value="香港">香港</option>
            <option value="澳门">澳门</option>
            <option value="台湾省">台湾省</option>
          </select>
        </div>
        <div class="layui-form-label">
          <label>城市/县</label>
          <select required name="city">
            <option value="杭州">杭州</option>
            <option value="南昌">南昌</option>
          </select>
          <select required name="village">
            <option value="中关村">中关村</option>
            <option value="华西村">华西村</option>
          </select>
        </div>
      </li>
      <li class="layui-form-li">
        <div class="layui-form-label layui-form-area">
          <label>内容</label>
          <textarea required name="content"></textarea>
        </div>
      </li>
      <li class="layui-form-li">
        <button class="layui-form-button">提交</button>
      </li>
    </ul>
  </form>
</div>
  
<div class="footer">
  <div class="layui-main">
    <p>2016 &copy; <a href="/">layui.com</a> LGPL license</p>
    <p>
      <a href="/alone/">独立组件</a>
      <a href="http://fly.layui.com/auth/get" target="_blank">捐赠授权</a>
      <a href="http://fly.layui.com/jie/3147.html" target="_blank">VIP说明</a>
      <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
      <a href="http://sentsin.com/cooperation.html" target="_blank">商务合作</a>
      <a href="http://fly.layui.com/jie/2461.html" target="_blank">微信公众号</a>
    </p>
  </div>
</div>
<script src="//res.layui.com/layui/build/layui.js"></script>
<script>
layui.config({
  base: '//res.layui.com/lay/modules/layui/'
}).use('global');
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>
<script>
layui.use('form', function(){
  var form = layui.form;
  
  //验证
  form.check({
    custom: { 
      username: function(value){
        if(value.replace(/\s/g, '') === ''){
          return '用户名不能为空';
        }
      }
    }
  }, function(data){
    layer.msg(JSON.stringify(data), {time: 6000});
  });
  
  //密码强度
  form.pass();
  
  //多选框
  form.checkbox();
  
  //下拉选择框
  form.select();
  
});
</script>
</body>
</html>